<template>
  <div class="page-form-box">
    <div v-for="(formItem, formIndex) in formList" :key="formIndex">
      <div v-if="formItem.type === 'table'" v-show="(!formItem.hasOwnProperty('vIf')) || (formItem.hasOwnProperty('vIf') && formItem.vIf === true)">
        <div class="area-header" style="width:100%;">
          <span class="area-header-title">{{ $t(formItem.title) }}</span>
        </div>
        <div class="page-form-table">
          <div v-for="(tableItem, index) in formItem.tablePageList.filter(obj => obj.vIf !== false)" :key="index" class="page-form-cell" :style="{'flex-basis': tableItem.width ? tableItem.width + '!important' : '25%'}">
            <div v-if="tableItem.type === 'title'" class="page-form-table-title" :style="tableItem.style">
              {{ tableItem.title }}
            </div>
            <div v-else class="page-form-table-value" :style="tableItem.style">
              <div v-if="tableItem.type === 'input'">
                <div v-if="!tableItem.isNotForm && !tableItem.childrenValue">
                  {{ form[tableItem.value] }}<span v-if="tableItem.inputUnit">{{ $t(tableItem.inputUnit) }}</span>
                </div>
                <div v-else-if="!tableItem.childrenValue">
                  {{ tableItem.value }}<span v-if="tableItem.inputUnit">{{ $t(tableItem.inputUnit) }}</span>
                </div>
                <div v-else-if="form[tableItem.value] && form[tableItem.value][tableItem.childrenValue]">
                  {{ form[tableItem.value][tableItem.childrenValue] }}
                </div>
              </div>
              <div v-if="tableItem.type === 'textarea'">
                <div v-if="!tableItem.isNotForm && !tableItem.childrenValue" class="pre-wrap" v-html="form[tableItem.value]" />
                <div v-else-if="!tableItem.childrenValue" class="pre-wrap" v-html="tableItem.value" />
                <div v-else-if="form[tableItem.value] && form[tableItem.value][tableItem.childrenValue]" class="pre-wrap" v-html="form[tableItem.value][tableItem.childrenValue]" />
              </div>
              <div v-if="tableItem.type === 'user'">
                <UserSelect
                  v-model="form[tableItem.value]"
                  :view-show="true"
                />
              </div>
              <div v-if="tableItem.type === 'time'">
                {{ parseTime(form[tableItem.value], tableItem.timePattern) }}
              </div>
              <div v-if="tableItem.type === 'dateRange'">
                <span v-for="(time, timeIndex) in form[tableItem.value]" :key="time"> {{ parseTime(time) }}{{ timeIndex === 0 ? '/' : '' }}</span>
              </div>
              <div v-if="tableItem.type === 'money'">
                {{ moneyFormat(form[tableItem.value], tableItem.moneyUnit) + $t(tableItem.inputUnit) }}
              </div>
              <div v-if="tableItem.type === 'select'">
                <ViewSelect v-if="tableItem.selectType === 'dict'" :value="form[tableItem.value]" :dict-val="tableItem.dictVal" />
                <!-- <ViewSelect v-if="tableItem.selectType === 'options'" :value="form[tableItem.value]" :data-list="tableItem.selectDataList" :label-params="tableItem.selectLabelParams" :value-params="tableItem.selectValueParams" /> -->
                <template v-if="tableItem.selectType === 'options'">
                  {{ selectListLabel(tableItem.selectDataList, form[tableItem.value], tableItem.selectLabelParams, tableItem.selectValueParams) }}
                </template>
                <!-- <CascaderSelect
                v-if="tableItem.selectType === 'cascader'"
                v-model="form[tableItem.value]"
                :options="tableItem.selectDataList"
                :view-show="true"
                :field-names="{text: tableItem.selectLabelParams,value: tableItem.selectValueParams}"
              /> -->
              </div>
              <div v-if="tableItem.type === 'fundselect'">
                <fundSelect :value="form[tableItem.value]" :is-short="form.isShort" :view-show="true" />
              </div>
              <div v-if="tableItem.type === 'mainBody'">
                <MainBodySelect
                  v-model="form[tableItem.value]"
                  :view-show="true"
                  :parameters="tableItem.formMainBodySelectChoice ? form[tableItem.formMainBodySelectChoice] : tableItem.mainBodySelectChoice"
                />
              </div>
              <div v-if="tableItem.type === 'dept'">
                <DeptSelect v-model="form[tableItem.value]" :view-show="true" />
              </div>
              <div v-if="tableItem.type === 'FocusIndustry'">
                <FocusIndustry :industry-data="form[tableItem.value]" />
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- <div v-if="formItem.type === 'title' && (formItem.vIf || formItem.vIf === undefined)" class="area-header" style="margin-top: 10px;">
        <span class="area-header-title">{{ $t(formItem.title) }}</span>
      </div> -->
      <div v-if="formItem.type === 'list' && (formItem.vIf || formItem.vIf === undefined)">
        <div v-if="formItem.title" class="area-header">
          <span class="area-header-title">{{ $t(formItem.title) }}</span>
        </div>
        <div v-if="!formItem.isNotForm" class="">
          <div v-if="formItem.listType === 'vertical'">
            <div v-for="(listItem, listIndex) in form[formItem.value]" :key="listIndex">
              <pageForm :form-list="listIndex === 0 ? formItem.listPageList : [formItem.listPageList[1]]" :model="listItem" />
            </div>
          </div>
          <div v-else>
            <div v-for="(listItem, listIndex) in form[formItem.value]" :key="listIndex" class="page-form-cell-list">
              <pageForm :form-list="formItem.listPageList" :model="listItem" />
            </div>
          </div>
        </div>
        <div v-else class="">
          <div v-if="formItem.listType === 'vertical'">
            <div v-for="(listItem, listIndex) in formItem.value" :key="listIndex">
              <pageForm :form-list="listIndex === 0 ? formItem.listPageList : [formItem.listPageList[1]]" :model="listItem" />
            </div>
          </div>
          <div v-else>
            <div v-for="(listItem, listIndex) in formItem.value" :key="listIndex" class="page-form-cell-list">
              <pageForm :form-list="formItem.listPageList" :model="listItem" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="formItem.type === 'dataList'" v-show="(!formItem.hasOwnProperty('vIf')) || (formItem.hasOwnProperty('vIf') && formItem.vIf === true)">
        <!-- {{ formItem.vIf }} -->
        <div v-if="formItem.title" class="area-header">
          <span class="area-header-title">{{ $t(formItem.title) }}</span>
        </div>
        <table class="previewTable">
          <thead>
            <th v-for="(v, ind) in formItem.listPageList" v-show="(!v.hasOwnProperty('vIf')) || (v.hasOwnProperty('vIf') && v.vIf === true)" :key="ind">{{ $t(v.title) }}</th>
          </thead>
          <tbody>
            <tr v-for="(field, ind) in form[formItem.value]" :key="ind">
              <td v-for="(item, inds) in formItem.listPageList" v-show="(!item.hasOwnProperty('vIf')) || (item.hasOwnProperty('vIf') && item.vIf === true)" :key="inds">
                <template v-if="field[item.value] && field[item.value][item.childrenValue]">
                  {{ field[item.value][item.childrenValue] }}
                </template>
                <template v-else>
                  <template v-if="item.type === 'select'">
                    <ViewSelect v-if="item.selectType === 'dict'" :value="field[item.value]" :dict-val="item.dictVal" />
                    <template v-if="item.selectType === 'options'">
                      {{ selectListLabel(item.selectDataList, field[item.value], item.selectLabelParams, item.selectValueParams) }}
                    </template>
                  </template>
                  <template v-else-if="item.type === 'mainBody'">
                    <!-- {{ field }} {{ item }} -->
                    <MainBodySelect
                      v-model="field[item.value]"
                      :view-show="true"
                      :parameters="field[item.mainBodySelectChoice]"
                    />
                  </template>
                  <template v-else-if="item.type === 'money'">
                    {{ moneyFormat(field[item.value], item.moneyUnit) + $t(item.inputUnit) }}
                  </template>
                  <template v-else-if="item.type === 'time'">
                    {{ parseTime(field[item.value], item.timePattern) }}
                  </template>
                  <template v-else-if="item.type === 'dateRange'">
                    <span v-for="(time, timeIndex) in field[item.value]" :key="time"> {{ parseTime(time) }}{{ timeIndex === 0 ? '/' : '' }}</span>
                  </template>
                  <template v-else-if="item.type === 'user'">
                    <UserSelect v-model="field[item.value]" :view-show="true" />
                  </template>
                  <template v-else-if="item.type === 'dept'">
                    <DeptSelect v-model="field[item.value]" :view-show="true" />
                  </template>
                  <template v-else>
                    {{ field[item.value] }}
                  </template>
                </template>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="formItem.type === 'fileList'" v-show="(!formItem.hasOwnProperty('vIf')) || (formItem.hasOwnProperty('vIf') && formItem.vIf === true)">
        <div v-if="formItem.title" class="area-header">
          <span class="area-header-title">{{ $t(formItem.title) }}</span>
        </div>
        <table class="previewTable">
          <thead>
            <th v-for="(v, ind) in formItem.listPageList" :key="ind">{{ $t(v.title) }}</th>
            <template v-if="formItem.slotInputBoxData && formItem.slotInputBoxData.length > 0">
              <th v-for="(v, ind) in formItem.slotInputBoxData" :key="ind">{{ $t(v.label) }}</th>
              <th>{{ $t('备注') }}</th>
            </template>
          </thead>
          <tbody>
            <template v-if="formItem.slotInputBoxData && formItem.slotInputBoxData.length > 0">
              <tr v-for="(field, ind) in form[formItem.value]" :key="ind">
                <td v-for="(item, inds) in formItem.listPageList" :key="inds" :class="item.value === 'remark' ? 'pre-remark' : ''">
                  <template v-if="field[item.value] && field[item.value][item.childrenValue]">
                    {{ field[item.value][item.childrenValue] }}
                  </template>
                  <template v-else>{{ field[item.value] }}</template>
                  <!-- {{ field[item.value] }} -->
                </td>
                <template v-if="formItem.slotInputBoxData && formItem.slotInputBoxData.length > 0">
                  <td v-for="(v, _ind) in formItem.slotInputBoxData" :key="_ind">
                    <div v-for="(field, inds) in form[formItem.value][ind].slotData" :key="inds">
                      <div v-if="field.model === v.model">{{ slotDataFormat(field, field.value) }}</div>
                    </div>
                  </td>
                  <td>
                    <div class="pre-remark" v-html="field.remark" />
                  </td>
                </template>
              </tr>
            </template>
            <template v-else>
              <tr v-for="(field, ind) in form[formItem.value]" :key="ind">
                <td v-for="(item, inds) in formItem.listPageList" :key="inds" :class="item.value === 'remark' ? 'pre-remark' : ''">
                  <template v-if="field[item.value] && field[item.value][item.childrenValue]">
                    {{ field[item.value][item.childrenValue] }}
                  </template>
                  <template v-else>{{ field[item.value] }}</template>
                  <!-- {{ field[item.value] }} -->
                </td>
                <template v-if="formItem.slotInputBoxData && formItem.slotInputBoxData.length > 0">
                  <td v-for="(v, ind) in formItem.listPageList" :key="ind">{{ $t(v) }}</td>
                </template>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
  <script>
  import ViewSelect from '@/components/ViewSelect'
  import fundSelect from '@/components/Select/fundSelect'
  import MainBodySelect from '@/components/MainBodySelect/index'

  // import SelectDepartment from '@/components/SelectDepartment'
  // import ViewFileTable from '@/components/File/ViewFileTable.vue'
  export default {
    components: {
      ViewSelect,
      fundSelect,
      MainBodySelect
      // SelectDepartment,
      // ViewFileTable
    },
    props: {
      formList: {
        type: Array,
        default: () => []
      },
      model: {
        type: Object,
        default: () => {}
      },
      resetForm: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        // 真实值
        form: this.model,
        initForm: this.resetForm
      }
    },
    watch: {
      model: {
        handler(newVal) {
          if (newVal) {
            this.form = newVal
          } else {
            this.form = this.initForm
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {

    },
    methods: {
      slotDataFormat(data, val) {
        if (data.selectOptions && data.selectOptions.length > 0) {
          return this.selectListLabel(data.selectOptions, val, 'dictLabel', 'dictValue')
        } else {
          return val
        }
      }

    }
  }
  </script>
  <style lang="scss" scoped>
      /deep/.pre-wrap, /deep/.pre-remark{
        word-break: break-all;
        white-space: pre-wrap;
        text-align: left!important;
        p{
          margin: 0;
        }
      }
      .page-form-table {
        border-top: 1px solid #dfe6ec;
        border-left: 1px solid #dfe6ec;
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 2px)!important;
        padding-left: 1px;
        padding-top: 1px;
      }

      .page-form-table >>> .page-form-cell {
        flex-basis: 25%;
        padding: 10px;
        border-bottom: 1px solid #dfe6ec;
        border-right: 1px solid #dfe6ec;
      }

      .page-form-table >>> .page-form-table-title {
        color:#555 !important;
        font-weight: 600;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
      }

      .page-form-table >>> .page-form-table-value {
        color:#606266;
      }

      .page-form-box >>> .page-form-cell-list {
        margin-bottom: 10px;
      }

      .page-form-box >>> .area-header {
        margin-top: 10px;
      }
  </style>

